const drag = {
  mounted(el) {
    const target = el;
    target.style.position = "relative";

    const dom = document.createElement('DIV');
    dom.style.height = '100%';
    dom.style.width = '5px';
    dom.style.position = 'absolute';
    dom.style.top = '0';
    dom.style.right = '0';
    dom.style.zIndex = '1';
    dom.style.cursor = 'col-resize';
    dom.style.backgroundColor = 'transparent';
    dom.style.userSelect = 'none';
    dom.style.touchAction = 'none';

    dom.onmouseout = () => {
      dom.style.backgroundColor = 'transparent';
    };

    dom.onmousedown = (e) => {
      const currPosX = e.clientX;
      const targetWidth = target.clientWidth;
      const minWidth = 100;
      const maxWidth = 800;

      document.onmousemove = (e) => {
        const distanceX = e.clientX - currPosX;
        let newWidth = targetWidth + distanceX;
        newWidth = newWidth < minWidth ? minWidth : newWidth;
        newWidth = newWidth > maxWidth ? maxWidth : newWidth;
        target.style.width = `${newWidth}px`;
      };

      document.onmouseup = () => {
        dom.style.backgroundColor = 'transparent';
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };

    target.appendChild(dom);
  }
};

export default drag;